<script>

import './index.less';

export default {
  name: 'Icon',
  props: {
    prefixCls: {
      default: '',
      type: String,
    },
    size: {
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'big'].indexOf(value) !== -1;
      },
      default: 'md',
    },
    /*
      是否使用symbol方式引入SVG
    */
    symbol: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: '',
    },
    type: String,
    title: String,
    spin: Boolean,
  },
  data() {
    return {
    };
  },
  computed: {
    classes() {
      const {
        prefixCls, type, spin, size,
      } = this;
      return [
        prefixCls, type,
        `je-icon-${size}`,
        { [`${prefixCls}-spin`]: !!spin || type === 'loading' },
      ];
    },
  },
  beforeDestroy() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    handleClick(event) {
      if (this.clicked) {
        return;
      }

      this.clicked = true;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => (this.clicked = false), 500);
      this.$emit('tap', event);
    },
  },
  render() {
    const {
      title, classes, handleClick, $listeners, color,
    } = this;
    const { symbol, type } = this.$props;
    const iconProps = {
      attrs: {
        title,
      },
      class: classes,
      on: {
        ...$listeners,
        tap: handleClick,
      },
      style: {
        color,
      },
    };
    return (
      symbol
        ? <svg {...iconProps} aria-hidden="true">
        <use xlinkHref={`#${type}`} />
      </svg>
        : <i {...iconProps}/>
    );
  },
};


</script>
